<!-- <template>
  <div class="dashboard-container">
    <div class="dashboard-text">name: {{ name }}</div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'Dashboard',
  computed: {
    ...mapGetters([
      'name'
    ])
  }
}
</script> -->

<template>
  <div>
      <div>
          分类管理---{{ userData }}
      </div>
      <div class="userface">
          <img :src="userData.userFace" alt="" width="200px" height="200px">
      </div>
      <div class="information">
          <div class="realname">{{ userData.realname }}</div>
          <div class="gender">{{ userData.gender }}</div>
          <div class="nation">{{ userData.nation }}族</div>
          <div class="username">{{ userData.username }}</div>
          <div class="password">{{ userData.password }}</div>
          <div class="telephone">{{ userData.telephone }}</div>
          <div class="email">{{ userData.email }}</div>
      </div>
      <div>
          <el-button type="text" @click="dialogFormVisible = true">修改信息</el-button>
      </div>
      <div class="kuang">
          <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
              <el-form :model="form" ref="myForm">
                  <el-upload class="avatar-uploader" action="http://121.4.83.32:7006/UploadControlle/upload"
                      :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload" style="text-align: center;">
                      <img v-if="imageUrl" :src="imageUrl" class="avatar">
                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
                  <el-form-item label="姓名" :label-width="formLabelWidth">
                      <el-input v-model="form.realname" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="性别" :label-width="formLabelWidth">
                      <el-select v-model="form.gender" placeholder="请选择性别">
                          <el-option label="male" value="gender"></el-option>
                          <el-option label="female" value="gender"></el-option>
                      </el-select>
                  </el-form-item>
                  <el-form-item label="民族" :label-width="formLabelWidth">
                      <el-input v-model="form.nation" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="用户名" :label-width="formLabelWidth">
                      <el-input v-model="form.username" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="密码" :label-width="formLabelWidth">
                      <el-input v-model="form.password" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="电话" :label-width="formLabelWidth">
                      <el-input v-model="form.telephone" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="邮箱" :label-width="formLabelWidth">
                      <el-input v-model="form.email" autocomplete="off"></el-input>
                  </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                  <el-button @click="dialogFormVisible = false">取 消</el-button>
                  <el-button type="primary" @click="toSave">确 定</el-button>
              </div>
          </el-dialog>
      </div>
  </div>
</template>
<script>
import { get,post } from '@/utils/request'
import { mapGetters } from 'vuex';
export default {
  computed: {
      // 直接当做普通属性调用不加括号
      // 任何data中数据变化立即重新计算
      // 计算属性会缓存
      ...mapGetters(['userData'])
  },
  data() {
      return {
          // userData:{}
          //上传图片
          imageUrl: '',
          //传值
          params: {
              id: '',
              userface: ''
          },
          //模态框dialog
          dialogFormVisible: false,
          //模态框宽
          formLabelWidth:'60px',
          form:{}
      }
  },
  methods: {
      // saveFace() {
      //     // let res = get('/baseUser/alterUserface', this.params)
      //     // console.log(res, '头像')
      //     // this.dialogVisible = false
      // },
      //上传头像组件
      handleAvatarSuccess(res, file) {
          this.imageUrl = URL.createObjectURL(file.raw);
      },
      beforeAvatarUpload(file) {
          const isJPG = file.type === 'image/jpeg';
          const isLt2M = file.size / 1024 / 1024 < 2;

          if (!isJPG) {
              this.$message.error('上传头像图片只能是 JPG 格式!');
          }
          if (!isLt2M) {
              this.$message.error('上传头像图片大小不能超过 2MB!');
          }
          return isJPG && isLt2M;
      },
      //模态框方法
      handleClose(done) {
          this.$confirm('确认关闭？')
              .then(_ => {
                  done();
              })
              .catch(_ => { });
      },
      //
      async toSave() {
          this.$refs['myForm'].validate(async (valid) => {
              if (valid) {
                  // console.log(this.form, 'qqqpwoeop')
                  // this.form.thumpUp = this.money;
                  let res = await post('/baseUser/saveOrUpdate', this.form)
                  this.$notify({
                      title: '点击上传',
                      type: 'success',
                      message: res.message
                  });
                  // this.$router.push('/info/list')
              } else {
                  return false
              }
          })
          this.dialogFormVisible= false
      }

  },
  created() {
      // this.saveFace()
  }
}
</script>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>